<template>
  <div id="main">
    <div class="btn">
      <el-button @click="componentName='table'">table</el-button>
      <el-button @click="componentName='tableVux'">tableVux</el-button>
    </div>

    <div class="mainContent">
      <component :is='componentJson[componentName]'></component>
    </div>

  </div>
</template>
<script setup>
import { shallowRef, ref, shallowReactive, reactive, computed } from 'vue';
import table from "./views/table.vue";
import tableVux from './views/tableVuex.vue';
var componentJson = shallowRef({
  table: table,
  tableVux: tableVux
})

const componentName = ref('table');

</script>
<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
  .btn{
    width: 100%;
    height: 32px;
  }
  .mainContent{
    width: 100%;
    height: calc(100% - 32px);
  }
}
</style>